<template>
  <div>
    <FormCard title="新增授权" :back="back">
      <a-flex :justify="'space-between'">
        <template>
          <a-button :disabled="userData.selectedKeys.length === 0" type="primary" @click="assign()">
            批量授权
          </a-button>
        </template>
      </a-flex>
      <div class="py-8 px-12 flex justify-between">
        <a-input-search
          v-model:value="userQuery.userName"
          placeholder="请输入用户名"
          allow-clear
          style="width: 200px"
          @search="allocateUsers"
        ></a-input-search>
        <a-button type="primary" :disabled="userData.selectedKeys.length === 0" @click="assign()">
          批量授权
        </a-button>
      </div>
      <a-table
        :columns="formatColumns(userColumns)"
        :loading="loading"
        :data-source="userData.data"
        :pagination="{
          total: userQuery.total,
          current: userQuery.pageNum,
          pageSize: userQuery.pageSize,
        }"
        :row-selection="{
          selectedRowKeys: userData.selectedKeys,
          onChange,
        }"
        @change="pageChange"
        row-key="userId"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'operation'">
            <a-tooltip title="">
              <a-button type="link" style="color: green" @click="assign(record.userId)">
                授权
              </a-button>
            </a-tooltip>
          </template>
        </template>
      </a-table>
    </FormCard>
  </div>
</template>

<script setup lang="ts">
import { formatColumns } from '@/utils/table/table';
import type { PaginationProps } from 'ant-design-vue/es/pagination';
import { RoleViewNum, roleFormMode } from '../../data/table';
import { userColumns } from './columns';
import { allocateUsers, assign, loading, onChange, userData, userQuery } from './data';

const pageChange = (page: PaginationProps) => {
  userQuery.value.pageNum = page.current!;
  userQuery.value.pageSize = page.pageSize!;
  allocateUsers();
};

const back = () => {
  roleFormMode.value = RoleViewNum.ROLE_TABLE;
};
onMounted(() => {
  allocateUsers();
});
</script>

<style lang="scss" scoped>
.allocate-modal {
  position: absolute;
  width: 80%;
  height: 90%;
  border: 1px solid var(--border-color);
  background: #f8f8f8;
  top: 5%;
  left: 10%;
  box-shadow: 0 0 12px #8080804f;
}
.system__icon {
  &:hover {
    background: #eee;
  }
}
.user-list {
  overflow: auto;
}
</style>
